<template>
	<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
		<FormItem prop="userName">
			<Input size="large" prefix="ios-person" v-model="form.userName" placeholder="请输入用户名">
				<span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
			</Input>
		</FormItem>
		<FormItem prop="password">
			<Input size="large" prefix="md-lock" type="password" v-model="form.password" placeholder="请输入密码"> </Input>
		</FormItem>
		<FormItem>
			<Button @click="handleSubmit" type="primary" long>登录</Button>
		</FormItem>
	</Form>
</template>
<script>
export default {
	name: 'LoginForm',
	props: {
		userNameRules: {
			type: Array,
			default: () => {
				return [{ required: true, message: '账号不能为空', trigger: 'blur' }];
			}
		},
		passwordRules: {
			type: Array,
			default: () => {
				return [{ required: true, message: '密码不能为空', trigger: 'blur' }];
			}
		}
	},
	data() {
		return {
			form: {
				userName: 'admin',
				password: ''
			}
		};
	},
	computed: {
		rules() {
			return {
				userName: this.userNameRules,
				password: this.passwordRules
			};
		}
	},
	methods: {
		handleSubmit() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.$emit('on-success-valid', {
						userName: this.form.userName,
						password: this.form.password
					});
				}
			});
		}
	}
};
</script>
